<template>
	<view class="recruit-container">
		<view class="recruit-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<view class="head-top">
				<image src="@/static/img/arr.png" mode="" @click="goto"></image>
				<text class="title">招人</text>
				<view class="head-btn" @click="openswitch">
					<image src="@/static/img/common/swap.png" mode=""></image>
					<text class="btn-name">切换为求职者</text>
				</view>
			</view>
			<view class="head-search" >
					<view class="search-ipt" @click="search(2)">
						<image src="@/static/img/common/searc.png" mode=""></image>
						<text>搜索</text>
					</view>
			</view>
			<view class="head-menu-box">
				<view class="head-menu">
					<view class="menu-item"
					  v-for="(item, index) in data.menuList"
						:key="index"
						@click="jumpMenu(index)">
						<image :src="`/static/img/common/${item.url}.png`" mode=""></image>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="recruit-main">
			<view class="main-menu">
				<view :class="navIndex === index ? 'menu-item menu-item-active' : 'menu-item'"
				 v-for="(item ,index) in data.navList"
				 :key="index"
				 @click="jumpNav(index)">{{ item.name }}</view>
			</view>
			<scrollView
			 class='scroll'
			 :scrollBoolean="listData.total" 
				:scrollTop="listData.scrollTop"
				:scrollLoad="listData.total > listData.list.length" 
				:refresherRriggered="listData.refresherRriggered"
				@refresherrefresh="refresherrefresh" 
				@scrolltolower="scrolltolower">
			 <view class="main-list">
				 <view class="list-item"
				  v-for="(item, index) in listData.list"
					:key="index"
					@click="jumpItem(item)">
					 <view class="item-top">
						 <view class="top-left">
							 <image :src="httpUrl+'/app/file/viewFile?fileId='+item.avatarFileId" ></image>
							 <view class="introduce-info">
								 <view class="info-title">{{ item.name }}</view>
								 <view class="info-num"> {{ item.gender.name }} | {{ item.age }}岁 </view>
							 </view>
						 </view>
						 <view class="top-right" @click.stop="jumpMes(item)">打招呼</view>
					 </view>
					 <view class="item-desc">{{ item.introduction }}</view>
					 <view class="item-expect">期望岗位: {{ item.positionName }}</view>
				 </view>
			 </view>
				
			</scrollView>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import commonNavBar from "@/components/commonNavBar.vue";
import scrollView from "@/components/scrollView.vue";
import { getStatusBarHeight } from '@/utils/common/common.js'
import api from '@/utils/api/recruit.js'
import {
		setDialogView
	} from '@/utils/dialogView.ts'
const barHeight = ref(null)	
onLoad(_ => {
	barHeight.value = getStatusBarHeight()
})
onMounted(_ => {
	// console.log(1112);
	getList()
	getLocation()
})
const httpUrl = getApp().globalData.baseUrl
// 搜索词
const searchValue = ref(null)
const navTitle = ref('招人')
// 菜单数据
const data = reactive({
	menuList: [
		{ name: '职位管理', url: 'zwxx' },
		// { name: '完善信息', url: 'wsxx' },
		{ name: '工单管理', url: 'jzgz' },
		{ name: '消息', url: 'wdxx' },
	],
	navList: [
		{ name: '全部' },
		{ name: '附近' },
		{ name: '最新' },
	]
})
// 列表数据
const listData = reactive({
	total: 0, //	总条数
	scrollTop: 0, //	滚动区域
	refresherRriggered: false, //	下拉状态
	pageInfo: { pageNo: 1, pageSize: 10, queryType: 'RECOMMEND' },
	list: [
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
		// { name: '小王', sex: '女', num: '25', desc: '有工作经验，每分钟打字40个以上', gw: '客服' },
	]
})
// 栏目点击索引
const navIndex = ref(0)
// 搜索
const search = val => {
	uni.navigateTo({
		url: '/pages/searchPosition/searchPosition?type=' + val
	})
}
// 返回上一页
const goto = _ => {
	uni.navigateBack()
}
// 切换类型
const jumpNav = index => {
	navIndex.value = index;
	listData.pageInfo.queryType = index === 0 ? 'RECOMMEND' : index === 1 ? 'IN_THE_VICINITY' : 'UP_TO_DATE'
	listData.list = []
	listData.pageInfo.pageNo = 1 
	listData.pageInfo.pageSize = 10 
	getList()
}
// 刷新
const refresherrefresh = _ => {
	listData.refresherRriggered = true;
	listData.list = [];
	listData.pageInfo.pageNo = 1
	listData.pageInfo.pageSize = 10 
	getList();
}
// 触底事件
const scrolltolower = _ => {
	if (listData.list.length >= listData.total) return false;
		listData.pageInfo.pageNo++;
		getList();	
}
const getLocation = () => {
	setDialogView('ACCESS_FINE_LOCATION').then(res=>{
		if(res == 1){
			uni.getLocation({
				type: 'gcj02', // 默认使用 wgs84 坐标系
				success: (res) => {
					// 获取成功时返回经纬度
					listData.pageInfo.latitude = res.latitude;
					listData.pageInfo.longitude = res.longitude;
					// getList()
				},
				fail: (err) => {
					// 获取失败时的回调
					console.error('获取经纬度失败', err);
				}
			});
		}
	})
		
	}
// 获取列表
const getList = async _ => {
	listData.pageInfo.latitude = listData.pageInfo.latitude ? listData.pageInfo.latitude : 0
	listData.pageInfo.longitude  = listData.pageInfo.longitude ? listData.pageInfo.longitude : 0
	const res = await api.getAllResume(listData.pageInfo)
	listData.list = listData.list.concat(res.data.list);
	listData.total = res.data.total;
	listData.refresherRriggered = false;
}
// 切换找工作
const openswitch = _ => uni.navigateTo({ url:'/pages/jobHunting/jobHunting'})
// 点击菜单
const jumpMenu = index => {
	if(index === 0) {
		uni.navigateTo({ 	url:'/pages/positionManagement/positionManagement'})
	} else if(index === 1)  {
		uni.navigateTo({ 	url:'/pages/parttimeJob/parttimeJob'})
	} else {
		uni.switchTab({ 	url:'/pages/TUIKit/components/TUIConversation/index'})
	}
}
// 点击每一项
const jumpItem = val => {
	uni.navigateTo({
		url:'/pages/recruit/detail?id=' + val.userId
	})
}
// 打招呼
const jumpMes = async item => {
	await getApp().globalData.getUserInfo()
	let id = `C2C${item.userId}`
	uni.setStorageSync('qzId', item.userId)
	uni.navigateTo({
		url:`/pages/TUIKit/components/TUIChat/index?conversationID=${id}&userId=${item.userId}&messageType=${'boss'}`
	})
}
</script>

<style lang="scss" scoped>	
#app{
	background: #F4F6FA !important;
}
.recruit-container{
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: #F4F6FA;
	// height: 100%;
	.recruit-head{
		width: 750rpx;
		// height: 431rpx;
		background: url('@/static/img/common/zrbg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.head-top{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 750rpx;
			height: 88rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			.title{
				width: 100%;
				flex: 1;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
				line-height: 48rpx;
				// text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: 285rpx;
				
			}
			.head-btn{
				padding: 8rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: rgba(255,255,255,0.9);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 4rpx;
				}
			}
		}
		.head-search{
			margin: 12rpx 0;
			padding: 0 24rpx;
			box-sizing: border-box;
			margin-bottom: 36rpx;
			.search-ipt{
				background: rgba(255,255,255,0.9);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				border: 2rpx solid #F4F6FA;
				padding: 11rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				width: 100%;
				image{
					width: 42rpx;
					height: 42rpx;
				}
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #BFBFBF;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 4rpx;
				}
			}
		}
		.head-menu-box{
			padding: 0 24rpx;
			box-sizing: border-box;
			.head-menu{
				padding: 41rpx 40rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.menu-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 96rpx;
						height: 96rpx;
					}
					.name{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-top: 8rpx;
					}
				}
			}
		}

	}
	.recruit-main{
			 // height: calc(100% - 1200rpx);
			 height: calc(100% - 263rpx);
			 margin-top: 40rpx;
			 padding: 0 24rpx;
			 .main-menu{
				 display: flex;
				 align-items: center;
				 margin-bottom: 10rpx;
				 .menu-item{
					 font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					 font-weight: normal;
					 font-size: 28rpx;
					 color: #262626;
					 line-height: 42rpx;
					 text-align: center;
					 font-style: normal;
					 text-transform: none;
					 display: flex;
					 align-items: center;
					 justify-content: center;
				 }
				 .menu-item-active{
					 background: #FFFFFF !important;
					 border-radius: 29rpx 29rpx 29rpx 29rpx;
					 color: #6B64D3;
				 }
				 .menu-item{
					 width: 104rpx;
					 height: 58rpx;
					 background: rgba(255,255,255,0);
					 border-radius: 29rpx 29rpx 29rpx 29rpx
				 }
			 }
			 .scroll{
				 height: 75%;
				 .main-list{
					 width: 100%;
					 height: 100%;
					 .list-item{
						 width: 100%;
						 padding: 24rpx;
						 box-sizing: border-box;
						 background: #FFFFFF;
						 border-radius: 24rpx 24rpx 24rpx 24rpx;
						 margin-bottom: 24rpx;
						 .item-top{
							 display: flex;
							 align-items: center;
							 justify-content: space-between;
							 width: 100%;
							 .top-left{
								 display: flex;
								 align-items: center;
								 flex: 1;
								 image{
									 width: 64rpx;
									 height: 64rpx !important;
									 border-radius: 50%;
									 margin-right: 17rpx;
									 object-fit: cover;
								 }
								 .introduce-info{
									 display: flex;
									 flex-direction: column;
									 align-items: center;
									 .info-title{
										 font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
										 font-weight: normal;
										 font-size: 32rpx;
										 color: #262626;
										 line-height: 48rpx;
										 text-align: left;
										 font-style: normal;
										 text-transform: none;

									 }
									 .info-desc{
										 font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
										 font-weight: normal;
										 font-size: 28rpx;
										 color: #595959;
										 line-height: 42rpx;
										 text-align: center;
										 font-style: normal;
										 text-transform: none;
										 margin-top: 8rpx;
									 }
								 }
							 }
							 .top-right{
								 border-radius: 32rpx 32rpx 32rpx 32rpx;
								 border: 1rpx solid #6B64D3;
								 padding: 13rpx 11rpx;
								 box-sizing: border-box;
								 font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								 font-weight: normal;
								 font-size: 28rpx;
								 color: #6B64D3;
								 line-height: 42rpx;
								 text-align: center;
								 font-style: normal;
								 text-transform: none; 
							 }
						 }
						 .item-desc{
							 width: 100%;
							 font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							 font-weight: normal;
							 font-size: 28rpx;
							 color: #262626;
							 line-height: 42rpx;
							 text-align: left;
							 font-style: normal;
							 text-transform: none;
							 display: -webkit-box; /* 使用弹性盒子布局 */
							 -webkit-box-orient: vertical; /* 竖向排列 */
							 -webkit-line-clamp: 3; /* 限制为 3 行 */
							 overflow: hidden; /* 超出隐藏 */
							 text-overflow: ellipsis; /* 超出部分显示省略号 */
							 margin-top: 24rpx;
						 }
						 .item-expect{
							  width: 100%;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #262626;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							 display: -webkit-box; /* 使用弹性盒子布局 */
							 -webkit-box-orient: vertical; /* 竖向排列 */
							 -webkit-line-clamp: 3; /* 限制为 3 行 */
							 overflow: hidden; /* 超出隐藏 */
							 text-overflow: ellipsis; /* 超出部分显示省略号 */
							 // height: calc(3 * 1.2em); /* 根据行高调整高度 */
							 // line-height: 1.2em; /* 设置行高 */
							 margin-top: 16rpx;
						 }
					 }
				 }
			 }
	}
}
</style>
